<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Zhou Wenying
  Date: 2023/3/9
  Time: 21:18
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>商品列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="/static/css/style1.css " rel="stylesheet" type="text/css" media="all" />
    <link type="text/css" rel="stylesheet" href="/static/css/style.css">
    <link href="/static/css/lbst.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!--header-->




<!--header-->
<jsp:include page="/page/head2.jsp"></jsp:include>
<!--banner-->

<%--轮播--%>
<br><br>
<div class="container">
    <div class="row clearfix">

        <div class="col-sm-12 matter-banner">
            <div class="slider">
                <div class="callbacks_container">
                    <ul class="rslides" id="slider">
                        <%--<li>
                            <img src="/static/image/lb1.png" alt="">
                        </li>
                        <li>
                            <img src="/static/image/lb2.png" alt="">
                        </li>
                        <li>
                            <img src="/static/image/lb3.png" alt="">
                        </li>--%>
                        <c:forEach items="${lbBook}" var="book">
                            <li style="height:260px;background-color:#F2F6F7">
                                <a href="/showBook?bookId=${book.bookId}">
                                <div class="row" style="padding-top:30px;padding-bottom:30px">
                                    <div class="col-md-1 column">
                                    </div>
                                    <div class="col-md-6 column">
                                        <div style="font-size:60px;color:#5D4B33" class="row">${book.bookName}</div><br>
                                        <div class="row"></div>
                                        <div style="font-size:30px;color:#F07818"class="row">今日推荐</div>
                                    </div>
                                    <div class="col-md-3 column">
                                        <img  style="height:200px; width:200px" src="/getImg?img=${book.bookImg}">
                                    </div>
                                </div>
                                </a>
                            </li>
                        </c:forEach>

                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<!--//banner-->

<!--gallery-->
<div class="gallery">
    <div class="container">
        <div class="alert alert-danger">热度推荐</div>
        <div class="gallery-grids">
            <c:forEach items="${requestScope.hotbooks}" var="hotbook">
                <div class="col-md-4 gallery-grid glry-two">
                    <a href="/showBook?bookId=${hotbook.bookId}">
                        <img src="/getImg?img=${hotbook.bookImg}" class="img-responsive" alt="${hotbook.bookName}" width="350" height="350">
                    </a>
                    <div class="gallery-info galrr-info-two">
                        <p>
                            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                            <a href="/showBook?bookId=${hotbook.bookId}">查看详情</a>
                        </p>
                        <a class="shop" href="javascript:;" onclick="addCart('${hotbook.bookName}',${hotbook.bookId})">加入购物车</a>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="galy-info">
                        <div style="text-align: center;"><p>${hotbook.bookName}</p></div>
                        <div class="galry">
                            <div class="prices" style="text-align: center;">
                                <span style="color: black;font-size: 25px">￥${hotbook.bookMoney}</span>
                                &nbsp;&nbsp;&nbsp;
                                <span style="color: #666;font-size: 25px"><del>￥${hotbook.bookOldMoney}</del></span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

            </c:forEach>

        </div>
        <div class="clearfix"></div>
        <div class="alert alert-info">新品推荐</div>
        <div class="gallery-grids">
            <c:forEach items="${requestScope.newbooks}" var="newbooks">
                <div class="col-md-3 gallery-grid ">
                    <a href="/showBook?bookId=${newbooks.bookId}">
                        <img src="/getImg?img=${newbooks.bookImg}" class="img-responsive" alt="${newbooks.bookName}">
                    </a>
                    <div class="gallery-info">
                        <p>
                            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                            <a href="/showBook?bookId=${newbooks.bookId}">查看详情</a>
                        </p>
                        <a class="shop" href="javascript:;" onclick="addCart('${newbooks.bookName}',${newbooks.bookId})">加入购物车</a>
                        <div class="clearfix"> </div>
                    </div>
                    <div class="galy-info">
                        <div style="text-align: center;"><p>${newbooks.bookName}</p></div>
                        <div class="galry">
                            <div class="prices" style="text-align: center;">
                                <span style="color: black;font-size: 25px">￥${newbooks.bookMoney}</span>
                                &nbsp;&nbsp;&nbsp;
                                <span style="color: #666;font-size: 25px"><del>￥${newbooks.bookOldMoney}</del></span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>

            </c:forEach>

        </div>
    </div>
</div>
<!--//gallery-->
<!--subscribe-->
<div class="subscribe"></div>
<!--//subscribe-->

<!--footer-->
<jsp:include page="/page/footer.jsp"></jsp:include>
<!--//footer-->


<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/responsiveslides.min.js"></script>


<script>
    //轮播时间
    $(function () {
        $("#slider").responsiveSlides({
            auto: true,/*自动播放幻灯片（默认为true）。*/
            speed: 500,/*幻灯片切换的速度（默认为500毫秒）。*/
            namespace: "callbacks",/*CSS类前缀，用于幻灯片的样式（默认为“callbacks”）。*/
            pager: true,/*是否显示幻灯片的分页器（默认为true）。*/
        });
    });
</script>




</body>
</html>
